import React, { Component } from 'react';
import { Icon, ActionSheet, Toast, Tools, Bubble, Modal } from 'weaver-mobile';
const getLabel = Tools.getLabel;
const alert = Modal.alert;
export default class CardHeader extends Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        const { onRef } = this.props;
        onRef && onRef(this);
    }

    render() {
        const { title1, title2, title3, title4, concerned, concernedClick, moreClick, showConcerned, showMore, iscrmcard } = this.props;
        // console.log(title2)
        return (
            <div className="crm-card-hearder">
                <div className="crm-card-hearder-top">{title1}</div>
                <div className="crm-card-hearder-middle">
                    <div dangerouslySetInnerHTML={{ __html: title2 }} />
                    <div>
                        {showConcerned && (
                            <span>
                                <i className={'crm-nav-header-icon icon-crm ' + (concerned ? "icon-crm-attention" : "icon-crm-attention-o")} onClick={() => {
                                    if (concernedClick) {
                                        concernedClick(concerned);
                                    }
                                }} />
                            </span>
                        )}
                        {showConcerned && showMore && (
                            <span className="crm-card-hearder-blank"></span>
                        )}
                        {showMore && (
                            <span>
                                <i className={'crm-nav-header-icon icon-crm icon-crm-more'} onClick={() => {
                                    if (moreClick) {
                                        moreClick();
                                    }
                                }} />
                            </span>
                        )}
                    </div>
                </div>
                <div className="crm-card-hearder-bottom" style={{ height: "20px", lineHeight: "20px", display: "flex" }}>
                    <div style={{ flex: "1 1", overflow: "hidden", textOverflow: "ellipsis" }}>{title3}</div>
                    {iscrmcard && <img src="/images/ecology9/crm/navi.png" style={{ width: "20px", height: "20px", margin: "0 0 0 auto" }} alt="到这去" onClick={this.showOpenSystemApp} />}
                </div>

            </div>
        );
    }

    showOpenSystemApp = () => {
        const { title3, lat, lon, userCurrentlat, userCurrentlng, userCurrentAddress, changePosition, canEdit } = this.props;
        // console.log(lat,lon);
        if (lat == "" || lon == "") {
            if (canEdit) {
                alert(getLabel('500807', '请先维护客户地址信息！是否前往更改定位?'), '', [
                    { text: getLabel('201', '取消'), onPress: () => { } },
                    { text: getLabel('83446', '确定'), onPress: () => { changePosition && changePosition() } },
                ])
            } else {
                alert(getLabel('518542', '客户地址信息不全，请联系负责人重新修改地址信息！'), '', [
                    { text: getLabel('83446', '确定') },
                ])
            }
            return;
        }
        ActionSheet.showShareActionSheetWithOptions({
            options: this.dataList,
            message: getLabel('514199', '请选择要打开的应用'),
        },
            (buttonIndex) => {
                this.setState({ clicked1: buttonIndex > -1 ? this.dataList[buttonIndex].title : 'cancel' });
                // also support Promise
                return new Promise((resolve) => {
                    this.openSystemApp(buttonIndex); resolve()
                });
            });
    }
    dataList = [
        { url: 'amap', title: getLabel('514200', '高德地图') },
        { url: 'baidumap', title: getLabel('514201', '百度地图') },
        { url: 'didi', title: getLabel('514202', '滴滴打车') },
        // { url: 'xiecheng', title: getLabel('514203','携程') },
    ].map(obj => ({
        icon: <img src={`/images/ecology9/crm/${obj.url}.png`} alt={obj.title} style={{ width: 50 }} />,
        title: obj.title,
    }));
    openSystemApp = (buttonIndex) => {
        // console.log("buttonIndex", buttonIndex)
        if (buttonIndex < 0) return;
        if (!window.em) return;
        const { title3, lat, lon, userCurrentlat, userCurrentlng, userCurrentAddress } = this.props;
        // console.log(title3, lat, lon)
        let app = {};
        switch (buttonIndex) {
            case 0://高德地图
                app.iOSscheme = 'iosamap://route/plan/';
                app.iOSurl = ' ';
                app.params = { dname: title3, dlat: lat, dlon: lon, dev: 0, t: 0, sourceApplication: "EM7" };
                app.androidscheme = 'amapuri://route/plan/';
                app.androidurl = '';
                break;
            case 1://百度地图
                app.iOSscheme = 'bdmap://map/navi';
                app.iOSurl = ' ';
                app.params = { query: title3 };
                app.androidscheme = 'baidumap://map/navi';
                app.androidurl = '';
                break;
            case 2://滴滴打车
                app.iOSscheme = 'diditaxi://dache/sendorder';
                app.iOSurl = ' ';
                app.params = { slat: userCurrentlat, slon: userCurrentlng, dlat: lat, dlon: lon, source: "express-car" };
                app.androidscheme = 'OneTravel://dache/sendorder';
                app.androidurl = '';
                break;
            case 3://携程
                app.iOSscheme = 'CtripWireless://';
                app.iOSurl = ' ';
                app.params = {};
                app.androidscheme = 'CtripWireless://';
                app.androidurl = '';
                break;

        }
        window.em.openApp(app);
    }
}